<template>
    <div :class="['app',]">
        <div :class="['bg', fontColor]" ref="bg">
            <div class="like-table">
                <p :class="['pb']">我的命令行</p>
                <p>hello,这是操作说明：</p>
                <p v-for="item in helpList" :key="item.command">
                    <font>{{ item.command }}</font>
                    <font>{{ item.parameter }}</font>
                    <font>{{ item.explain }}</font>
                </p>
            </div>
            <div v-for="item in dataList" :key="item.id">
                <p>
                    <font>[ haoNB ]：</font>
                    <input :class="[fontColor]" ref="input" type="text" v-model="item.version"
                        :disabled="item.id == dataList.length - 1 ? false : true">
                </p>
                <div v-if="item.automaticList">{{ item.automaticList }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import mixins from '@/mixins/mixins.js'
export default {
    mixins: [mixins],
    data() {
        return {
            autoTimer: null,
            fontColor: "white",
            dataList: [
                {
                    id: 0,
                    key: "",
                    value: "",
                    version: "",
                    automaticList: "",
                },
            ],
            helpList: [
                {
                    command: "命令",
                    parameter: "参数",
                    explain: "说明",
                },
                {
                    command: "clear",
                    explain: "清屏",
                },
                {
                    command: "baidu",
                    parameter: "搜索内容",
                    explain: "跳转百度（直接跳转到搜索内容）",
                },
                {
                    command: "auto",
                    explain: "自己出内容",
                },
                {
                    command: "color",
                    parameter: "green（绿色）,red（红色）,blue（蓝色）,white（白色）",
                    explain: "更改字体颜色",
                },
            ],
        }
    },
    created() {
        let that = this
        document.onkeydown = function (e) {
            var key = window.event.keyCode;
            if (key == 13) {
                let version = that.dataList[that.dataList.length - 1].version
                that.cutText(version)
            }
        };
    },
    mounted() { },
    methods: {
        // 增加一个空行
        addLine() {
            let obj = {
                id: this.dataList.length,
                key: "",
                value: "",
                version: "",
                automaticList: "",
            }
            this.dataList.push(obj)
            // 光标对准最后一个
            this.$nextTick(() => {
                this.$refs["input"][this.$refs["input"].length - 1].focus()
            })

        },
        // 分割字符成为命令+文字
        cutText(str) {
            // 为空/没有空格
            // 没有输入东西
            if (!str) {
                console.log("error,没空格");
                this.addLine()
                return
            }
            var arr = str.split(" ");
            // 语法错误
            if (arr.length > 2) {
                console.log("error,语法错误");
                this.addLine()
                return
            }
            this.toImplement(arr[0], arr[1])
            // 执行命令
        },


        // 开始执行命令
        toImplement(key, str) {
            let list = this.dataList
            let that = this
            switch (key) {
                // 百度页面
                case 'baidu':
                    window.open(`http://www.baidu.com/s?wd=${str}`)
                    break;
                // 清屏
                case 'clear':
                    let timer = setInterval(() => {
                        if (list.length == 2) {
                            list[0].version = ''
                            clearInterval(timer)
                        }
                        list.pop()
                    }, 20)
                    break;
                // 变字体颜色
                case 'color':
                    if (str == 'white' || str == 'blue' || str == 'red' || str == 'green') {
                        this.fontColor = str
                    }
                    break;
                // 自动打字
                case 'auto':
                    document.addEventListener("keydown", function (e) {
                        if (e.keyCode == 27) {
                            clearInterval(autoTimer)
                            let version = that.dataList[that.dataList.length - 1].version
                            that.cutText(version)
                        }
                    });
                    let autoTimer = setInterval(() => {
                        let num = this.randomNum(99999999, 0).toString()
                        if (num.length < 8) {
                            let len = num.length
                            for (let i = 0; i < 8 - len; i++) {
                                num = '0' + num
                            }
                        }
                        this.$set(list[list.length - 1], 'automaticList', `${list[list.length - 1].automaticList + num} `)
                    }, 100)
                    break;
            }
            this.addLine()
        },

    },
}
</script>

<style scoped lang="less">
.app {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    background-color: black;
}

.bg {
    background-color: black;
    padding: 20px;
    font-family: "微软雅黑";
}

p {
    display: flex;

    font {
        display: block;
    }

    input {
        display: block;
        background-color: black;
        border: none;
        outline: none;
        flex: 1;
    }
}

.like-table {
    width: 60%;

    p {
        display: flex;
        margin-bottom: 10px;

        font:nth-child(1) {
            width: 15%;
        }

        font:nth-child(2) {
            flex: 1;
        }

        font:nth-child(3) {
            width: 30%;
        }
    }
}

.pb {
    font-size: 30px;
}

.pm {
    font-size: 20px;
}

.ps {
    font-size: 12px;
}

.red {
    color: rgb(255, 45, 45);
}

.white {
    color: white;
}

.blue {
    color: rgb(36, 109, 255);
}

.green {
    color: rgb(0, 255, 0);
}
</style>